import { InfiniteScroll, List, NavBar } from "antd-mobile";
import { useState,useEffect, } from "react";
import { setbook } from "./API";
import style from "../css/books.module.css"
import { useNavigate } from "react-router-dom";
export default () => {
   let[list, setList] = useState([]);
   let [hasMore, setHasMore] = useState(true);
   let [obj, setObj] = useState({ perpage: 10, goods_type: 4, goods_position :0});
    let books=async ()=>{
      let {data}=await setbook(obj);
      // list=data.data.list;
      setList((val:any):any=>[...val,...data.data.list]);
      setObj((val:any)=>val.goods_position+10);
      setHasMore(data.data.list.length>0);
      console.log(data);
      
    } 
    let nav=useNavigate();
    let back=()=>{
      nav("/")
    }
    useEffect(()=>{
      books()
    },[])
  return (
    <div>
      <NavBar
        style={{
          "--height": "36px",
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        找书单
      </NavBar>
      <div className={style.box5}>
        <List>
          {list.map((item, index) => (
            <List.Item key={index}>
              <div className={style.box} onClick={()=>{nav("/bookdan/id=" + item.goods_id);}}>
                <div>
                  <img width={"150px"} src={item.gallery[0].images} alt="" />
                  <img width={"150px"} src={item.gallery[1].images} alt="" />
                  <img width={"150px"} src={item.gallery[2].images} alt="" />
                </div>
                <h3>{item.goods_name}</h3>
                <p>{item.expert_description}</p>
                <div>
                  <img width={"30px"} src={item.expert.avatar} alt="" />
                  <span> {item.expert.name}</span>
                </div>
              </div>
            </List.Item>
          ))}
        </List>
        <InfiniteScroll loadMore={books} hasMore={hasMore} />
      </div>
    </div>
  );
};
